<dialog id="turbo-confirm" class="w-72">
  <form method="dialog">
    <div class="relative w-full max-w-xl max-h-full">
      <div class="relative bg-white rounded-lg shadow">
        <button value="cancel" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center" data-modal-hide="popup-modal" tabindex="3">
          <%= svg "x-mark", class: "size-6" %>
          <span class="sr-only"><%= t "avo.close_modal" %></span>
        </button>
        <div class="p-4 md:p-5 text-center">
          <svg class="mt-8 mx-auto mb-4 text-gray-400 w-12 h-12" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
          </svg>
          <p class="mb-5 text-md font-normal text-gray-700">
            <%= t "avo.are_you_sure" %>
          </p>
          <div class="mt-12 w-full flex flex-col justify-center gap-2">
            <button value="confirm" class="text-red-600 border border-red-600 hover:bg-red-50 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm items-center px-4 py-2 text-center" tabindex="1" autofocus>
              <%= t "avo.yes_confirm" %>
            </button>
            <button value="cancel" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100" tabindex="2">
              <%= t "avo.no_cancel" %>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</dialog>
